<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绩效信息</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <style>
        .table{
            position: absolute;
            top: 450px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div>
        <!-- <div class="aui-tab" id="tab">
            <div class="aui-tab-item tapmode aui-active" id="tab1">智能报表</div>
            <div class="aui-tab-item tapmode" id="tab2" onclick="openNewFrame('gaishu');">细节概述</div>
        </div> -->
        <div class="aui-card-list">
            <div class="aui-card-list-header aui-card-list-user aui-border-b">
                <div class="aui-card-list-user-avatar">
                    <img src="../image/linechart.png" class="aui-img-round" />
                </div>
                <div class="aui-card-list-user-name">
                    <div>上半月考核分数统计图</div>
                    <small>一天前</small>
                </div>
                <div class="aui-card-list-user-info">紫色：本周考核分数；  绿色：上一周考核分数</div>
            </div>
            <div class="aui-card-list-content-padded">
                <img src="../image/pink.png" />
            </div>
            <div class="aui-card-list-footer aui-border-t">
                <div><i class="aui-iconfont aui-icon-note"></i> 666</div>
                <div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
                <div><i class="aui-iconfont aui-icon-star"></i> 888</div>
            </div>
        </div>
        <div class="aui-card-list">
            <div class="aui-card-list-header aui-card-list-user aui-border-b">
                <div class="aui-card-list-user-avatar">
                    <img src="../image/histogram.png" class="aui-img-round" />
                </div>
                <div class="aui-card-list-user-name">
                    <div>2017年教职工总分</div>
                    <small>1月前</small>
                </div>
                <div class="aui-card-list-user-info">按工号排序</div>
            </div>
            <div class="aui-card-list-content-padded">
                <img src="../image/pink.png" />
            </div>
            <div class="aui-card-list-footer aui-border-t">
                <div><i class="aui-iconfont aui-icon-note"></i> 666</div>
                <div><i class="aui-iconfont aui-icon-laud"></i> 888</div>
                <div><i class="aui-iconfont aui-icon-star"></i> 888</div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript">
    //js组件 aui-tab.js
    function auitab(){
        var tab = new auiTab({
            element:document.getElementById("tab"),
            index:1,
            repeatClick:false
        },function(ret){
            //console.log(ret);
        });
    }
    function loadData() {
        api.refreshHeaderLoadDone();
        api.parseTapmode();
    }
    function UILine(){
        var UILineChart = api.require('UILineChart');
        UILineChart.open({
            rect: {
                x: 15,
                y: 69,
                w: 330,
                h: 250
            },
            xAxis: {
                indexs: ['一', '二', '三', '四', '五', '六', '七'],
                screenXcount: 7
            },
            yAxis: {
                max: 5,
                min: -5,
                step: 1,
                base: 0
            },
            datas: [
                [1, -1, 2, 0, 3,-2,2],
                [-2, 1, -1, 0, 5,1,0]
            ],
            styles: {
                xAxis: {
                    bg: '#b2dfee',
                    markColor: '#888',
                    markSize: 8
                },
                yAxis: {
                    bg: '#b2dfee',
                    markColor: '#888',
                    markSize: 12
                },
                coordinate: {
                    bg: '#fcfcfc',
                    color: '#cacaca',
                    baseColor: 'bbb',
                },
                colors: ['#800080', '#7FFFAA']
            },
            fixedOn: api.frameName,
            fixed: false
        }, function(ret, err) {
            if (ret) {
                //alert(JSON.stringify(ret));
            } else {
                //alert(JSON.stringify(err));
            }
        });
    }
    function UIbarChart(){
        var UIBarChart = api.require('UIBarChart');
        UIBarChart.open({
            rect: {
                x: 15,
                y: 458,
                w: 330,
                h: 250
            },
            yAxis: {
                max: 35,
                min: 0,
                step: 5
            },
            data: [{
                xAxis: 'A01',
                yAxis: 25
            }, {
                xAxis: 'A02',
                yAxis: 20
            }, {
                xAxis: 'B01',
                yAxis: 16
            }, {
                xAxis: 'B02',
                yAxis: 6
            }, {
                xAxis: 'C01',
                yAxis: 26
            }, {
                xAxis: 'C02',
                yAxis: 14
            }],
            styles: {
                yAxis: {
                    width: 30,
                    bg: '#B2DFEE',
                    markColor: '#fff',
                    markSize: 12
                },
                xAxis: {
                    height: 30,
                    bg: '#B2DFEE',
                    markColor: '#fff',
                    markSize: 12
                },
                coordinate: {
                    bg: '#FCFCFC',
                },
                bar: {
                    width: 30,
                    bg: '#FFF',
                    tint: '#8DB6CD',
                    interval: 16
                }
            },
            fixedOn: api.frameName,
            fixed: false
        }, function(ret, err) {
            if (ret) {
                //alert(JSON.stringify(ret));
            } else {
                //alert(JSON.stringify(err));
            }
        });
    }
    apiready = function() {
        UIBarChart = api.require("UIBarChart");
    }
    function openNewFrame(type) {
        api.openFrame({
            name: type,
            url: './' + type + '.html',
            rect: {
                x: 0,
                y: 40,
                w: api.winWidth,
                h: api.winHeight
            },
            bounces: false,
            delay: 200,
            animation: {
                type: 'movein'
            }
        });
    }
    apiready = function() {
        api.addEventListener({
            name:'swipeleft'
        }, function(ret, err){
           //alert('向左轻扫');
          // openNewFrame('gaishu');

        });
        api.setRefreshHeaderInfo({
            visible: true,
            bgColor: 'rgba(0,0,0,0)',
            textColor: '#666',
            textDown: '下拉刷新',
            textUp: '释放刷新'
        }, function(ret, err) {
            loadData();
        });
        auitab();
        UILine();
        UIbarChart();
    }

</script>
</html>
